<!-- 订单档案详情 -->

<template>
  <div></div>
  <div class="contract-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="contract-detail-header">
      <h2>
        <span
          :style="{
            marginLeft: '10px',
          }"
        >
          {{ headData.number }}
        </span>
        <!-- 
        <span
          :style="{
            color:
              headData.state === 1
                ? '#c9cdd4'
                : headData.state === 2
                ? '#156dff'
                : '#31c273',
            marginLeft: '10px',
          }"
          >{{
            headData.state === 1
              ? '待执行'
              : headData.state === 2
              ? '执行中'
              : '已完成'
          }}</span
        > -->
      </h2>
      <div>
        <table border="1" cellspacing="0">
          <tbody>
            <tr>
              <td>客户名称</td>
              <td> {{ headData.clientCompanyName }} </td>
              <td>订单金额</td>
              <td><span>$</span>{{ `${headData.totalPrice}` }} </td>
            </tr>
            <tr>
              <td>业务员</td>
              <td> {{ headData.userStaffName }} </td>
              <td>创建时间</td>
              <td>
                {{ dayjs(headData.createdAt).format('YYYY-MM-DD hh:mm:ss') }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="contract-detail-tabs">
      <a-tabs v-model:active-key="tabsActive" default-active-key="1" lazy-load>
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <baseInfo v-if="item.key === '1'"></baseInfo>
          <productInfo v-else-if="item.key === '2'"></productInfo>
          <CollectionAndInvoice
            v-else-if="item.key === '3'"
          ></CollectionAndInvoice>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import dayjs from 'dayjs';
  import {
    GetOrderfiles,
    GetClientOrderDetail,
  } from '@/api/order-management/client-order/index';
  import baseInfo from './components/baseInfo/index.vue';
  import productInfo from './components/productinfo/index.vue';
  import CollectionAndInvoice from './components/collection-and-invoice/index.vue';

  const route = useRoute();
  // const router = useRouter();

  const headData: any = ref({
    number: '',
    state: null,
    clientCompanyName: '',
    totalPrice: null,
    userStaffName: '',
    createdAt: '',
  });

  const title: string = '订单档案';
  const breadCrumb: string[] = ['订单管理', '客户订单', '订单档案'];
  const fileDetailsType = ref(1);
  let clientDetail = ref({
    name: '', // 客户名称
    salesName: '', // 业务员
  }); // 储存客户信息

  const getClientOrderInfo = async () => {
    const res = await GetClientOrderDetail({ id: Number(route.query.id) });
    headData.value = res;
  };
  getClientOrderInfo();

  const getcontractDetailData = async () => {
    try {
      // 获取合同详情
      const res: any = await GetOrderfiles({
        id: Number(route.query.id),
        fileDetailsType: 1,
      });
      res.extend = JSON.parse(res.extend);
      clientDetail.value = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getcontractDetailData();

  let tabsActive = ref('1'); // 储存当前活跃的tabs， 默认为第一个tabs
  const tabs = reactive([
    {
      key: '1',
      title: '基本信息',
    },
    {
      key: '2',
      title: '产品信息',
    },
    {
      key: '3',
      title: '回款与发票记录',
    },
  ]);
</script>

<style scoped lang="less">
  .contract-detail {
    &-header {
      padding: 10px 30px;

      table {
        width: 100%;
        border-color: #f9f9f9;
        tr {
          height: 58px;
          text-align: center;
        }
        td:nth-child(odd) {
          background-color: #f5f7fa;
          width: 200px;
        }
        td:nth-child(even) {
          width: 389px;
        }
      }
    }
  }
</style>
